import React, { useEffect, useState } from "react";
import { Modal } from "antd";

interface ModalProps {
  isVisible: boolean;
  title: React.ReactNode;
  modalWidth?: number;
  children: React.ReactNode;
  onOk: () => void;
  onCancel?: () => void;
}

const AdminModal: React.FC<ModalProps> = ({
  isVisible,
  title,
  modalWidth=520,
  children,
  onOk,
  onCancel,
}) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleCancel = () => {
    setIsModalOpen(false);
    onCancel?.();
  };

  useEffect(() => {
    setIsModalOpen(isVisible);
  }, [isVisible]);

  return (
    <Modal
      title={title}
      open={isModalOpen}
      onOk={onOk} // 使用传入的 handleOk 函数
      onCancel={handleCancel}
      width={modalWidth}
      destroyOnClose
      centered
      styles={{
        body: {
          maxHeight: 'calc(100vh - 200px)',
          overflowY: 'auto',
          paddingRight: '12px'
        }
      }}
    >
      {children}
    </Modal>
  );
};

export default AdminModal;
